<%--
  Created by IntelliJ IDEA.
  User: 10944
  Date: 2021/8/12
  Time: 13:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../common/css_js.jsp"/>
<%
    String path = request.getContextPath();
%>

<script src="<%=path%>/static/jquery/jquery-3.6.0.min.js"></script>
<script src="<%=path%>/static/hui/lib/layer/2.4/layer.js"></script>
<script src="<%=path%>/static/js/common.js"></script>
<link href="<%=path%>/static/modal/bootstrap-4.6.0-dist/css/bootstrap.min.css" rel="stylesheet"/>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<div class="container">

    <div class="m-3">
        <button class="btn btn-success"><a onclick="layer_show('添加菜品','returnAdd',800,600)">添加菜品</a></button>
    </div>
    <table class="table">
        <thead>
        <tr>
            <td>ID</td>
            <td>菜名</td>
            <td>类型</td>
            <td>成本</td>
            <td>售价</td>

        </tr>
        </thead>
        <tbody id="tbody">
        <c:forEach items="${pageData.list}" var="one" varStatus="sta">
            <tr>
                <td>${one.menusId}</td>
                <td>${one.menusName}</td>
                <td>${one.menusClass}</td>
                <td>${one.menusCost}</td>
                <td>${one.menusPrice}</td>
                <td>
                    <button class="btn btn-info"><a
                            onclick="layer_show('修改菜品','queryById?menusId=${one.menusId}',800,600)">修改</a></button>
                    <button class="btn btn-danger" onclick="del(${one.menusId})">删除</button>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    <!-- 分页栏部分-->
    <div class="container">
        <div class="col-md-6 offset-md-3">
            <div class="center-align">
                <div id="page">
                    <button class="btn btn-secondary" onclick="firstPage()">首页</button>
                    <button class="btn btn-secondary" onclick="previousPage()">上一页</button>
                    <button class="btn btn-secondary" onclick="nextPage()">下一页</button>
                    <button class="btn btn-secondary" onclick="lastPage()">尾页</button>
                    <span>当前第${pageData.currentPage}页,共${pageData.totalPage}页，共${pageData.totalSize}条数据</span>
                </div>
            </div>
        </div>
    </div>
    <script>
        var pageNumber =${pageData.currentPage};
        var pageSize = ${pageData.pageSize};
        var totalPage = ${pageData.totalPage};

        function goto() {
            window.location.href =
                "${pageContext.request.contextPath}/menus/all?pageNumber=" + pageNumber + "&pageSize=" + pageSize + "&menusName";
        }

        //首页
        function firstPage() {
            if (pageNumber > 1) {
                pageNumber = 1;
                //跳转页面
                goto();
            }
        }

        //上一页
        function previousPage() {
            if (pageNumber > 1) {
                pageNumber--;
                goto();
            }
        }

        //下一页
        function nextPage() {
            if (pageNumber < totalPage) {
                pageNumber++;
                goto()
            }
        }

        //尾页
        function lastPage() {
            if (pageNumber < totalPage) {
                pageNumber = totalPage;
                goto();
            }
        }

        function del(menusId) {
            if (confirm("你确定要删除该菜品么？")) {
                $.ajax({
                    url: "del",
                    method: "post",
                    type: "text",
                    data: {
                        menusId: menusId
                    }, success(data) {
                        if (data == "ok") {
                            alert("删除成功了!");
                            window.location.href = "all";
                        } else {
                            alert("删除失败了!");
                        }
                    }
                })
            }
        }
    </script>
</div>
</body>
</html>
